{% block sw_settings_list %}
{% block sw_settings_document_index %}
<sw-page class="sw-settings-document-list">

    {% block sw_settings_document_list_search_bar %}
    <template #search-bar>
        <sw-search-bar
            :placeholder="$tc('sw-settings-document.general.placeholderSearchBar')"
            :search-type="$tc('sw-settings-document.general.mainMenuItemGeneral')"
            @search="onSearch"
        />
    </template>
    {% endblock %}

    {% block sw_settings_document_list_smart_bar_header %}
    <template #smart-bar-header>
        {% block sw_settings_document_list_smart_bar_header_title %}
        <h2>
            {% block sw_settings_document_list_smart_bar_header_title_text %}
            {{ $tc('sw-settings.index.title') }}
            <mt-icon
                name="regular-chevron-right-xs"
                size="12px"
            /> {{ $tc('sw-settings-document.list.textHeadline') }}
            {% endblock %}

            {% block sw_settings_document_list_smart_bar_header_amount %}
            <span
                v-if="!isLoading"
                class="sw-page__smart-bar-amount"
            >
                ({{ total }})
            </span>
            {% endblock %}
        </h2>
        {% endblock %}
    </template>
    {% endblock %}

    {% block sw_settings_document_list_smart_bar_actions %}
    <template #smart-bar-actions>
        {% block sw_settings_document_list_smart_bar_actions_add %}
        <mt-button
            v-tooltip.bottom="{
                message: $tc('sw-privileges.tooltip.warning'),
                disabled: acl.can('document.creator'),
                showOnDisabledElements: true
            }"
            :disabled="!acl.can('document.creator') || undefined"
            class="sw-settings-document-list__add-document"
            variant="primary"
            size="default"
            @click="$router.push({ name: 'sw.settings.document.create' })"
        >
            {{ $tc('sw-settings-document.list.buttonAddDocument') }}
        </mt-button>
        {% endblock %}
    </template>
    {% endblock %}

    {% block sw_settings_document_list_content %}
    <template #content>
        <sw-card-view>
            {% block sw_settings_document_list_content_card %}
            <mt-card
                :is-loading="isLoading"
                position-identifier="sw-settings-document-list-content"
            >
                {% block sw_settings_document_list_grid %}
                <template #grid>
                    <sw-grid
                        class="sw-settings-document-list-grid"
                        :items="items"
                        :selectable="false"
                        table
                    >
                        <template
                            #columns="{ item }"
                        >
                            {% block sw_product_list_grid_columns %}

                            {% block sw_settings_document_list_columns_name %}
                            <sw-grid-column
                                class="sw-document-list__column-name"
                                flex="minmax(100px, 1fr)"
                                :label="$tc('sw-settings-document.list.columnName')"
                            >

                                {% block sw_settings_document_list_columns_name_link %}
                                <router-link
                                    :title="$tc('sw-settings-document.list.contextMenuEdit')"
                                    :to="{ name: 'sw.settings.document.detail', params: { id: item.id } }"
                                >
                                    {% block sw_settings_document_list_columns_name_link_inner %}
                                    {{ item.name }}
                                    {% endblock %}
                                </router-link>
                                {% endblock %}
                            </sw-grid-column>
                            {% endblock %}

                            {% block sw_settings_document_list_columns_type %}
                            <sw-grid-column
                                v-if="item.documentType.translated"
                                class="sw-document-list__column-type"
                                flex="minmax(100px, 1fr)"
                                :label="$tc('sw-settings-document.list.columnType')"
                            >
                                {{ item.documentType.translated.name }}
                            </sw-grid-column>
                            {% endblock %}

                            {% block sw_settings_document_list_columns_assignment %}
                            <sw-grid-column
                                flex="minmax(100px, 1fr)"
                                :label="$tc('sw-settings-document.list.columnAssignment')"
                            >
                                {% block sw_settings_document_list_columns_assignment_label %}
                                <div
                                    v-if="item.global"
                                    class="sw-list sw-document-list__label-wrapper"
                                >
                                    <sw-label size="medium">
                                        {{ $tc('sw-settings-document.list.global') }}
                                    </sw-label>
                                </div>
                                <ul
                                    v-if="!item.global"
                                    class="sw-list sw-document-list__label-wrapper"
                                >
                                    <li
                                        v-for="(salesChannel, index) in item.salesChannels"
                                        :key="index"
                                    >
                                        <sw-label
                                            v-if="salesChannel.salesChannel && salesChannel.salesChannel.translated"
                                            size="medium"
                                        >
                                            {{ salesChannel.salesChannel.translated.name }}
                                        </sw-label>
                                    </li>
                                </ul>
                                {% endblock %}
                            </sw-grid-column>
                            {% endblock %}

                            {% block sw_settings_document_list_columns_actions %}
                            <sw-grid-column
                                flex="minmax(70px, 70px)"
                                align="center"
                                label=""
                            >
                                <sw-context-button>

                                    {% block sw_settings_document_list_columns_actions_edit %}
                                    <sw-context-menu-item
                                        class="sw-document-list__edit-action"
                                        :disabled="!acl.can('document.editor')"
                                        :router-link="{ name: 'sw.settings.document.detail', params: { id: item.id } }"
                                    >
                                        {{ $tc('sw-settings-document.list.contextMenuEdit') }}
                                    </sw-context-menu-item>
                                    {% endblock %}

                                    {% block sw_settings_document_list_columns_actions_delete %}
                                    <sw-context-menu-item
                                        variant="danger"
                                        class="sw-document-list__delete-action"
                                        :disabled="!acl.can('document.deleter')"
                                        @click="onDelete(item.id)"
                                    >
                                        {{ $tc('sw-settings-document.list.buttonDelete') }}
                                    </sw-context-menu-item>
                                    {% endblock %}
                                </sw-context-button>
                            </sw-grid-column>
                            {% endblock %}

                            {% block sw_settings_document_list_delete_modal %}
                            <sw-modal
                                v-if="showDeleteModal === item.id"
                                :title="$tc('global.default.warning')"
                                variant="small"
                                @modal-close="onCloseDeleteModal"
                            >
                                {% block sw_settings_document_list_delete_modal_confirm_text %}
                                <p>
                                    {{ $tc('sw-settings-document.list.textDeleteConfirm', { name: item.name }, 0) }}
                                </p>
                                {% endblock %}

                                {% block sw_settings_document_list_delete_modal_footer %}
                                <template #modal-footer>
                                    {% block sw_settings_document_list_delete_modal_actions_cancel %}
                                    <mt-button
                                        size="small"
                                        variant="secondary"
                                        @click="onCloseDeleteModal"
                                    >
                                        {{ $tc('global.default.cancel') }}
                                    </mt-button>
                                    {% endblock %}

                                    {% block sw_settings_document_list_delete_modal_actions_delete %}
                                    <mt-button
                                        variant="critical"
                                        size="small"
                                        @click="onConfirmDelete(item.id)"
                                    >
                                        {{ $tc('sw-settings-document.list.buttonDelete') }}
                                    </mt-button>
                                    {% endblock %}
                                </template>
                                {% endblock %}
                            </sw-modal>
                            {% endblock %}
                            {% endblock %}
                        </template>

                        {% block sw_settings_document_list_grid_pagination %}
                        <template #pagination>
                            <sw-pagination
                                :page="page"
                                :limit="limit"
                                :total="total"
                                :total-visible="7"
                                @page-change="onPageChange"
                            />
                        </template>
                        {% endblock %}
                    </sw-grid>
                </template>
                {% endblock %}
            </mt-card>
            {% endblock %}
        </sw-card-view>
    </template>
    {% endblock %}
</sw-page>
    {% endblock %}
{% endblock %}
